<template>
    <div>
    <!--<loading v-if="isLoading === true" class="smc-finance-min-height"></loading>-->

    <div class="up-warp" v-show="isLoading === false">
        <div class="title">
            <div class="title-left">
                <span>{{$tc('smcFinance.up.titleLeft',0)}} </span>
                <img src="./img/smcf1@2x.png" alt="">
                <span>{{$tc('smcFinance.up.titleLeft',1)}}</span>
                <span>{{$tc('smcFinance.up.titleLeft',2)}}</span>
            </div>
            <div class="title-right">
                <span>{{$t('smcFinance.up.titleRight')}}</span>
                <span>168%</span>
            </div>
        </div>

        <div class="title-sub">
            {{$t('smcFinance.up.titleSub')}}
        </div>

        <div class="title-info">
            <span> {{$tc('smcFinance.up.titleInfo.amount',1)}} <i> {{$tc('smcFinance.up.titleInfo.amount',2)}}</i></span>
            <span> {{$t('smcFinance.up.titleInfo.price')}} <i>1</i> SMCF1= <i>1</i> USDT</span>
        </div>
        <div class="title-info">
            <span> {{$t('smcFinance.up.titleInfo.time')}} 2018/01/16 17:00:00 - 2018/01/17 17:00:00  </span>
        </div>

        <div class="coin-finance-quan">
            <div class="coin-finance-quan-info">
                <span>
                    <!-- {{$t('smcFinance.up.ticket.text1')}}89757 -->
                </span>
                <span>{{$t('smcFinance.up.ticket.text2')}}</span>
                <span>{{$t('smcFinance.up.ticket.text3')}}</span>
                <span>{{$t('smcFinance.up.ticket.text4')}}2018-04-05</span>
                <span>{{$t('smcFinance.up.ticket.text5')}}<i>100,000 SMC</i></span>
                <span :class="{'translate-up':$i18n.locale === 'us'}">{{$t('smcFinance.up.ticket.text6')}}</span>
                <!-- <a href="javascript:;"  @click="toBuy" :class=" isHadBuy || !isBtnNext ? 'hadBuy' : '' ">
                    {{ isHadBuy ? returnd ? $t('smcFinance.up.ticket.returnd') : $t('smcFinance.up.ticket.badBuy') : isBtnNext ? $t('smcFinance.up.ticket.buy') :  $t('smcFinance.up.ticket.passted') }}
                </a> -->
                <a href="javascript:;"  @click="toBuy" :class=" isHadBuy || !isBtnNext ? 'hadBuy' : '' ">
                    {{ isHadBuy ? ( returnd ? $t('smcFinance.up.ticket.returnd') : $t('smcFinance.up.ticket.badBuy') ): $t('smcFinance.up.ticket.buy') }}
                </a>
            </div>
            <div class="coin-finance-quan-info-shadow">
                
            </div>
            <p class="fn-ta-center ticket-tip">{{$t('smcFinance.up.ticketTip')}}</p>
            <div class="look-my-finance">
                <a href="javascript:;" @click="lookMyFinance">{{$t('smcFinance.up.mycf')}}</a>
            </div>

            <div class="finance-info-box">
                <div class="finance-info-box-left">
                    <div class="days">
                        <p><span>{{incomeDay}}</span>{{$tc('smcFinance.up.financeInfo.text1',0)}}</p>
                        <p>{{$tc('smcFinance.up.financeInfo.text1',1)}}</p>
                        <p>{{$tc('smcFinance.up.financeInfo.text1',2)}}</p>
                    </div>

                    <div class="begin">
                        <p v-if="incomeBeginDate">{{$$moment(incomeBeginDate).format('YYYY-MM-DD')}}</p>
                        <p v-else>--</p>
                        <p> {{$t('smcFinance.up.financeInfo.text2')}} </p>
                    </div>

                    <div class="risk">
                        <p> {{$tc('smcFinance.up.financeInfo.text3',1)}} </p>
                        <p> {{$tc('smcFinance.up.financeInfo.text3',2)}} </p>
                    </div>
                </div>
                <div class="finance-info-box-right">
                    <!-- <p>{{$t('smcFinance.up.financeInfo.text4')}}<span>{{INCOME_RATE}}%</span></p> -->
                    <p></p>
                    <p>
                        <a href="./market.html?s=smcf1_usdt"
                           class="to-trade"
                           :disabled="isTradeOpen === false">{{$t('smcFinance.up.financeInfo.text5')}}</a>
                    </p>
                </div>
            </div>
        </div>

        <confirm v-if="isShowPayDialogBuy === true"
            :on-success="onBuySuccess"
            v-on:hide="hidePayDialogBuy">
        </confirm>
        <set-pay-pwd v-if="isShowSetPayPwd"  
            :onBindingSuccess="setPayPwdSuccess"
            v-on:hide="isShowSetPayPwd = false">
        </set-pay-pwd>
    </div>
    </div>
</template>

<script type="text/babel">
    import lib from '../../../../common/lib';
    import lang from '../lang.js';
    import service from '../../service';
    import commonService from '../../../../common/commonService';
    import setPayPwd from '../../../../component/setPayPwd/main';


    import Loading from '../../../../../grsc-base/component/Loading.vue';
    import Confirm from './Confirm.vue';

    // 近期收益是一个常量
    const INCOME_RATE = 300;
    const DAY_TIMESTAMP = 24 * 60 * 60 * 1000;

    export default {
        data() {
            return {
                isLoading: true,
                INCOME_RATE: INCOME_RATE,
                isShowPayDialogBuy: false,
                returnd: false,
                isLogin: false,   //  false 未登陆 
                isHadBuy: false,  // 是否已经购买入场券  的文案
                isTradeOpen: false,  // 是否开放交易
                isBtnNext: false,  // 购买按钮 点击是否能进下一步  灰色
                incomeBeginDate: '',    // 收益开始时间
                incomeEndDate: '',      // 收益结束时间
                incomeDay: '--',           // 收益时间，默认90天
                isSetPayPassword: false,    // 是否设置过密码
                isShowSetPayPwd: false // 是否设置密码的弹窗
            };
        },
        components: {
            Confirm,
            Loading,
            setPayPwd
        },
        created(){
            this._init();
        },
        methods: {
            _init(){
                this._isSetPayPwd();
                this._isLogin();
                this._toBuyBtnStatus();

                // 判断交易对是否开放
                service.isSymbolTradeOpen({
                    'symbolName': 'USDT_SMCF1'
                }).done((rep) => {
                    if (rep.code === window.CODE.SUCCESS) {
                        if (rep.data && rep.data.status === 'LISTED') {
                            this.isTradeOpen = true;
                        } else {
                            this.isTradeOpen = false;
                        }
                    } else {
                        window.error(rep.msg)
                    }
                })

            },

            // 判断  活动  开关   仅用于判断按钮是否可点 (纯单一功能函数)
            _toBuyBtnStatus(){
                let param = {
                    fundAssetCode: 'SMCF1'
                };

                service.fundConfigQuery(param).done((rep) => {
                    console.log('===',rep)
                    if (rep.code === window.CODE.SUCCESS) {


                        // rep.data.ticketStatus = 'ON'
                        // console.log(rep.data.ticketStatus);



                        let data = rep.data;
                        // 关闭  &&  未登陆   灰色         没下一步
                        if(rep.data.ticketStatus === 'OFF' && this.isLogin === false){
                            this.isBtnNext = false;
                            this.isLoading = false;
                        }

                        // 打开  &&  未登陆   高亮   点击   跳转登陆
                        if(rep.data.ticketStatus === 'ON' && this.isLogin === false){
                            this.isBtnNext = true;
                            this.isLoading = false;
                        }

                        // 关闭  &&  已登陆   灰色   判断是否 已购买
                        if(rep.data.ticketStatus === 'OFF' && this.isLogin === true){
                            this._isHadBuy(()=>{
                                this.isLoading = false;
                                this.isBtnNext = false;
                            });
                        }

                        // 打开  &&  已登陆   再判断是否已购买   已经购买 灰色(已购买)    未购买 高亮(购买)
                        if(rep.data.ticketStatus === 'ON'  && this.isLogin === true){
                            this._isHadBuy((isOn)=>{
                                this.isLoading = false;
                                this.isBtnNext = !isOn;  // 如果已经购买 下一步不可点    两个单一功能函数，使用回调方式进行值的改变
                            });
                        }

                        // 这里记录收益的时间范围
                        if (data.fundBeginDate && data.fundEndDate) {
                            this.incomeBeginDate = rep.data.fundBeginDate;
                            this.incomeEndDate = rep.data.fundEndDate;
                            this.incomeDay = Math.floor((this.incomeEndDate - this.incomeBeginDate) / DAY_TIMESTAMP);
                        }

                    } else {
                        this.isLoading = false;
                        window.error(rep.msg);
                    }
                });
                
            },
            // 判断是否已经购买   仅文案显示 (纯单一功能函数)
            _isHadBuy(cbfn){
                service.getFinanceInfo({
                    fundAssetCode: 'SMCF1'
                }).done((rep) => {


                    // rep.data.buyTicket = 'UNPURCHASED'


                    console.log('+++',rep);
                    if (rep.code === window.CODE.SUCCESS) {
                       if(rep.data.buyTicket == 'PURCHASED'){    //  已经购买
                            this.isHadBuy = true;
                       }else if(rep.data.buyTicket == 'UNPURCHASED'){   //   未购买
                            this.isHadBuy = false;
                       } else if(rep.data.buyTicket == 'RETURNED'){     //   退回的
                            this.isHadBuy = true;
                            this.returnd = true;
                       }
                       cbfn && cbfn(this.isHadBuy);
                       console.log('开关', this.isBtnNext);
                       console.log('是否 登陆', this.isLogin);
                       console.log('是否 购买  未购买', this.isHadBuy);
                       console.log('是否 退还', this.returnd);
                    } else {
                        window.error(rep.msg);
                    }
                });
            },
            toBuy(){
                // 如果不可点 灰色  退出
                if(this.isBtnNext){
                    if(this.isLogin){
                        if(this.isSetPayPassword){
                            this.isShowPayDialogBuy = true;
                        }else{
                            this.isShowSetPayPwd = true;
                        }
                    }else{
                        this._goToLogin();
                    }
                }
            },
            hidePayDialogBuy() {
                this.isShowPayDialogBuy = false;
            },
            // 购买成功回调
            onBuySuccess(that, paypwd, cbfn) {
                service.buyTicket({
                    'fundAssetCode': 'SMCF1'
                },{
                    'pay-password': paypwd
                }).done((rep) => {
                    if (rep.code === window.CODE.SUCCESS) { 
                        this.isHadBuy = true;
                        this.isBtnNext = false;
                        window.success(rep.msg);
                        this.hidePayDialogBuy();
                    } else if (rep.code === window.CODE.PAY_PWD.CODE && rep.data && rep.data.num) {
                        let num = rep.data.num;
                        if (3 - num > 0) {
                            that.rules.paypwd.$setError(that.$t('common.IncorrectAssetPassTip',{num:3-num}));
                        } else {
                            that.rules.paypwd.$setError(window.CODE.PAY_PWD_LOCK[that.$i18n.locale]);
                        }
                    } else if (rep.code === window.CODE.PAY_PWD_LOCK.CODE) {
                        that.rules.paypwd.$setError(window.CODE.PAY_PWD_LOCK[that.$i18n.locale]);
                    } else if(rep.code === '120001'){
                        this.isHadBuy = true;
                        this.isBtnNext = false;
                        window.error(rep.msg);
                        this.hidePayDialogBuy();
                    } else {
                        // this.hidePayDialogBuy();
                        window.error(rep.msg);
                    }
                    
                    cbfn && cbfn();
                }) 
            },

            /**
             * 进入交易
             */
            toTrade() {
                if (this.isTradeOpen === true) {
                    window.location.href = './market.html?s=smcf1_usdt';
                }
            },
            // 设置密码成功回调函数
            setPayPwdSuccess(){
                this.isShowPayDialogBuy = true;
            },
            // 点击 查看我的基金 页面
            lookMyFinance() { 
                if(this.isLogin){
                    window.location.href = './smc_finance.html#/profit';
                }else{
                    this._goToLogin();
                }
            },
            _isSetPayPwd(){
                commonService.basic().done(rep=>{
                    if(rep.code === window.CODE.SUCCESS){
                        this.isSetPayPassword = rep.data.setPayPassword;
                    }else {
                        window.toast(rep.msg);
                    }
                })
            },
            _isLogin(){
                this.isLogin = lib.isLogin();
            },
            _goToLogin(){
                let fromPath = window.encodeURIComponent(window.location.href);
                window.location.href = './login.html?from=' + fromPath;
            },
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss" scoped>
    // 购买按钮不可用

    .coin-finance-quan{
        .ticket-tip{
            padding: 8px 0;
            color:#777777;
        }
    }
    .coin-finance-quan-info .hadBuy{
        background-color: #fafafa;
        color: #ccc;
        cursor: default;
    }
    .finance-info-box{
        box-sizing: border-box;
        padding: 40px 15px 15px 15px;
        height: 200px;
        border: 1px solid #e8e8e9;
        border-radius: 8px;
        display: flex;
        &-left{
            flex: 2;
            display: flex;
            .days{
                position: relative;
                flex: 1;
                text-align: center;
                &>p:nth-child(1){
                    font-size: 13px;;
                    &>span{
                        font-size: 42px;
                        color: #1e97fc;
                        font-weight: bold;
                    }
                }
                &>p:nth-child(2){
                    color: #777777;
                    padding-top: 5px;
                }
                &>p:nth-child(3){
                    color: #777777;
                    position: absolute;
                    bottom: 0px;
                    width: 500px;
                    left: 93px;
                    text-align: left;
                }
            }
            .begin{
                box-sizing: border-box;
                padding-top: 22px;
                flex: 1;
                text-align: center;
                &>p:nth-child(1){
                    font-size: 16px;
                }
                &>p:nth-child(2){
                    padding-top: 17px;
                    color: #777777;
                }
            }
            .risk{
                box-sizing: border-box;
                padding-top: 22px;
                flex: 1;
                text-align: center;
                &>p:nth-child(1){
                    font-size: 16px;
                }
                &>p:nth-child(2){
                    padding-top: 17px;
                    color: #777777;
                }
            }
        }
        &-right{
            height: 128px;
            border-left: 1px solid #f3f3f4;
            flex: 1;
            text-align: center;
            &>p:nth-child(1){
                color: #777777;
                &>span{
                    font-size: 30px;
                    color: #000;
                }
            }
            &>p:nth-child(2){
                margin-top: 25px;
                height: 70px;

                $color-btn-hover: #68c0f8;
                $color-font-gray: #a1a1a1;

                &>a.to-trade{
                    width: 200px;
                    height: 60px;
                    display: inline-block;
                    background-color: #1e97fc;
                    line-height: 60px;
                    text-align: center;
                    font-size: 16px;
                    color: #fff;
                    border-radius: 40px;
                    &:hover {
                        background-color: $color-btn-hover;
                        color: #fff;
                    }
                    &[disabled] {
                        pointer-events: none;
                        box-shadow: none;
                        background-color: $color-font-gray;
                        color: #fff;
                    }
                }
            }
        }
    }


    .look-my-finance{
        padding-bottom: 20px;
        text-align: right;
        padding-top: 60px;
        font-size: 16px;
    }

    .coin-finance-quan{
        margin-top: 30px;
        &-info{
            width: 800px; height: 188px;
            margin: 0 auto;
            background-image: url('../img/finance-bg.png');
            background-repeat: no-repeat;
            position: relative;

            &>span{
                position: absolute;
                color: #816c43;
            }
            // 编号
            &>span:nth-child(1){
                top: 153px;
                left: 55px;
                color: #deba7e;
            }

            // 尊享
            &>span:nth-child(2){
                top: 116px;
                left: 98px;
                font-size: 18px;
                color: #deba7e;
                transform: translateX(-50%);
            }

            // 001期入场券
            &>span:nth-child(3){
                top: 65px;
                left: 220px;
                font-size: 22px;
                color: #ffe0ad;
            }

            // 有效期到
            &>span:nth-child(4){
                color: #ffe0ad;
                top: 100px; left: 220px;
            }

            // 票价
            &>span:nth-child(5){
                color: #e8c07c;
                font-size: 13px;;
                top: 35px; left: 566px;
                &>i{
                    font-size: 22px;
                    color: #ffe0ad;
                    font-style: normal;
                }
            }

            // 注意
            &>span:nth-child(6){
                top: 145px; left: 282px;
                width: 452px;
                color: #ffde93;
            }

            // 购买
            &>a{
                background-color:#fff;
                border-radius: 40px;
                display: inline-block;
                position: absolute;
                top: 83px;
                right: 50px;
                width: 160px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                font-size: 13px;;
            }
        }
    }
    .coin-finance-quan-info-shadow{
        box-shadow: 0px 5px 10px #ccc;
        height: 2px;
        width: 805px; height: 1px;
        margin: 0 auto;
    }




    .up-warp{
    }

    .title{
        line-height: 50px;
        overflow: hidden;
        border-bottom: 1px solid #e8e8e9;
        &-left{
            float: left;
            >img{
                width: 40px;
                height: auto;
                position: relative;
                top: 10px;
            }
            &>span:nth-child(1){
                font-size: 20px;
                font-weight: bold;
            }

            &>span:nth-child(4){
                font-size: 12px;
                padding: 4px;
                background-color: #1e97fc;
                color: #fff;
                margin-left: 5px;
                border-radius: 3px;
            }
            &>span:nth-child(3){
                font-size: 12px;
                padding: 4px;
                background-color: #1e97fc;
                color: #fff;
                border-radius: 3px;

            }
        }
        &-right{
            float: right;
            &>span:nth-child(1){
                font-size: 16px;
            }
            &>span:nth-child(2){
                font-size: 20px;
                color: #1e97fc;
                font-weight: bold;
            }
        }
    }


    .title-sub{
        line-height: 20px;
        padding: 10px 0px;
        color: #777777;
    }
    .title-info{
        font-size: 18px;
        line-height: 70px;
        /*display: flex;*/
        /*justify-content: space-between;*/
        &>span{
            &>i{
                color: #1e97fc;
            }
        }
        &>span:nth-child(1){
            text-align: left;

            &>i{
                color: #777777;
                font-size: 12px;
            }
        }
        &>span:nth-child(2){
            margin-left: 100px;
            text-align: left;
        }
    }

    .translate-up{
        transform: translate(0,-8px);
    }
</style>












